<template>
  
    <div class="header">
          <div class="head">
              <div>
              <van-icon name="arrow-left"  width="20" height="20" @click="fh" class="picture" />
              </div>
              <span>账号与安全</span>
              <img src="../../assets/sweep.png" alt="" width="20" height="20" class="picture">
          </div>
          <div class="setup-one">
              <div class="next">
                  <p>手机号</p>
                  <div class="next_ne">
                      <div>+86 <span> 178****7062</span></div>
                      <img src="../../assets/nextstep.png" alt="" class="pictures">
                  </div>
              </div>
              <i></i>
              
              <div class="next" @click="changepassword">
                  <p>修改密码</p>
                  <img src="../../assets/nextstep.png" alt="" class="pictures">
              </div>
              
              
          </div>
          <div class="setup-one">
              <div class="next">
                  <p>实名认证</p>
                  <div class="next_ne">
                      <div class="next_ne_h">未认证</div>
                      <img src="../../assets/nextstep.png" alt="" class="pictures">
                  </div>
  
              </div>
  
          </div>
          <div class="setup-two">
              <div class="next">
                  <p>官方认证</p>
                  <div class="next_ne">
                      <div class="next_ne_h">未认证</div>
                      <img src="../../assets/nextstep.png" alt="" class="pictures">
                  </div>
              </div>
          </div>
          <p class="nex">个人职业资质、机构、企业认证</p>
          <div class="setup-three">
              <div class="next">
                  <p>微信账号</p>
                  <div class="next_ne">
                      <div class="next_ne_h">未绑定</div>
                      <img src="../../assets/nextstep.png" alt="" class="pictures">
                  </div>
              </div>
              <i></i>
              <div class="next">
                  <p>微博账号</p>
                  <div class="next_ne">
                      <div class="next_ne_h">未绑定</div>
                      <img src="../../assets/nextstep.png" alt="" class="pictures">
                  </div>
              </div>
              <i></i>
              <div class="next">
                  <p>qq账号</p>
                  <div class="next_ne">
                      <div class="next_ne_h">未绑定</div>
                      <img src="../../assets/nextstep.png" alt="" class="pictures">
                  </div>
              </div>
          </div>
  
  
  
          <div class="setup-three">
              <div class="next">
                  <p>登录设备账号</p>
                  <img src="../../assets/nextstep.png" alt="" class="pictures">
              </div>
          </div>
  
          <div class="setup-three">
              <div class="next">
                  <p>升级专业号</p>
                  <div class="next_ne">
                      <div class="next_ne_h">未升级</div>
                      <img src="../../assets/nextstep.png" alt="" class="pictures">
                  </div>
              </div>
          </div>
  
          <div class="setup-three">
              <div class="next">
                  <p>注销账号</p>
                  <img src="../../assets/nextstep.png" alt="" class="pictures">
              </div>
          </div>
  
          <div class="setup-four">
              <p>退出账户</p>
          </div>
      </div>
  </template>
  
  <script>
  export default {
      methods: {
          fh() {
              this.$router.go(-1)
              //返回上一页
          },
          changepassword() {
              this.$router.push('/resetPasswords')
          }
      }
  }
  </script>
  
  <style scoped>
  .header {
      background-color: rgb(255, 255, 255);
  }
  
  .head {
      width: 91%;
      height: 80px;
      display: flex;
      margin: 0px 15px 0px 15px;
      justify-content: space-between;
      align-items: center;
      position: relative;
      border: 0;
  }
  
  .setup-one {
      padding: 5px 0;
      width: 370px;
      background-color: white;
      border-radius: 20px;
      margin: 15px 10px 20px 10px;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: space-around;
  }
  
  i {
      width: 340px;
      height: 0px;
      border: 1px solid rgb(243, 243, 243);
      margin: 0 auto;
  }
  
  .setup-one p,
  .setup-two p,
  .setup-three p {
      margin: 10px 15px;
      font-size: 14px;
  }
  
  .setup-two {
      width: 370px;
      padding: 5px 0;
      background-color: white;
      border-radius: 20px;
      margin: 20px 10px;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: space-around;
  }
  
  .next_ne div{
      display: inline-block;
      font-size: 14px;
  }
  .next_ne_h{
      color: rgb(141, 141, 141);
  }
  .nex{
      font-size: 10px;
      margin-left: 25px;
      margin-bottom: 25px;
      color: darkgray;
  }
  .setup-three {
      width: 370px;
      padding: 5px 0;
      /* height: 250px; */
      background-color: white;
      border-radius: 20px;
      margin: 20px 10px 0px 10px;
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: space-around;
  }
  
  .setup-four {
      width: 370px;
      height: 50px;
      background-color: white;
      border-radius: 20px;
      margin: 20px 10px 0px 10px;
  }
  .setup-four p{
      text-align: center;
      line-height: 50px;
  }
  .pictures{
      width: 15px;
      height: 15px;
  }
  .next{
      width: 350px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }  
  
  .picture.van-icon.van-icon-arrow-left{
      width: 20px;
  }
  </style>